/*
 * @Author: FengKongLi 
 * @Date: 2021-08-29 14:26:01 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-29 16:18:28
 */

<template>
  <div class="page-div">
    <div>
      <h1>易洁家政</h1>
      <h3>员工端</h3>
      <div class="Login">
        <van-form :show-error-message="false" ref="form">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            autocomplete="off"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            autocomplete="off"
          />
          <van-field
            v-if="confVisible"
            v-model="confPassword"
            type="password"
            name="confPassword"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请再次输入密码' }]"
            autocomplete="off"
          />

          <div style="margin: 16px">
            <van-button
              class="btn"
              round
              block
              type="info"
              native-type="submit"
              @click="onSubmit"
            >
              <span v-if="this.title == '登录'">登录</span>
              <span v-else>注册</span>
            </van-button>
          </div>
          <a @click="toRegister" v-if="title == '登录'">没有账号？点击注册</a>
          <a @click="toLogin" v-else>已有账号，去登陆</a>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login, register, info } from "@/api/user";
import { getToken, setToken, setUserId } from "@/utils/auth";
export default {
  name: "",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      // 再次输入密码
      confPassword: "",
      // 确认密码输入框显示
      confVisible: false,
      // 提示
      title: "登录",
    };
  },
  methods: {
    // 提交表单
    async onSubmit() {
      // 发请求，获取到后台的token,保存到cookies里，获取当前登录的用户信息
      // 用到的axios、baseURL、qs、js-cookie
      // 安装axios、qs、js-cookie
      if (this.title == "登录") {
        let res = await login(this.form);
        // console.log(res.data.token);
        setToken(res.data.token);
        this.getUserIdByToken();
        // 路由跳转
        this.$router.push("/index");
      } else if (this.title == "注册") {
        if (this.form.password == this.confPassword) {
          let res = await register(this.form);
          // console.log(res);
          if (res.status == 200) {
            this.form = {};
            this.confPassword = "";
            this.$toast.success("注册成功");          
          }
        } else {
          this.$notify({ type: "danger", message: "输入密码不一致" });
        }
      }
    },
    toRegister() {
      this.form = {};
      this.title = "注册";
      this.$refs.form.resetValidation();
      this.confVisible = true;
    },
    toLogin() {
      this.form = {};
      this.title = "登录";
      this.$refs.form.resetValidation();
      this.confVisible = false;
    },
    // 通过token获取用户id
    async getUserIdByToken() {
      let token = getToken();
      let res = await info({ token });
      setUserId(res.data.id);
      // console.log(res);
      // console.log(Cookies.get("userId"));
    },
  },
};
</script>

<style scoped>
.page-div {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #45eef7;
  box-sizing: border-box;
  text-align: center;
}

.page-div > div {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  margin: 0 auto;
  font-size: 37px;
  font-family: serif;
  color: #fff;
}
h3 {
  margin: 0 auto;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
.Login {
  margin: 5vh auto;
  width: 90%;
  border-radius: 10px;
  padding: 5px 10px;
  background-color: #fff;
  /* box-shadow: 0 0 10px turquoise; */
}
.btn {
  border: 0;
  background-color: #45eef7;
}
a {
  display: inline-block;
  margin: 10px 0;
  width: 110px;
  height: 18px;
  color: #4e95f7;
  font-size: 12px;
  cursor: pointer;
}
</style>
